<template>
  <div class="body">
    <div class="header">
      <span class="title">文档管理系统</span>
    </div>
    <div class="zb">
      <div class="zbbg" style="background-color:#52d1e4">
        <img src="../../assets/home_images/kpiicon1.png">
        <span>文档总量</span>
        <!-- <span class="num">100个</span> -->
        <span class="num">{{ wdzl }}个</span>
      </div>
      <div class="zbbg" style="background-color:#e58a05">
        <img src="../../assets/home_images/kpiicon3.png">
        <span>已用空间</span>
        <!-- <span class="num">10GB</span> -->
        <span class="num">{{ sizeAll }}</span>
      </div>
      <div class="zbbg" style="background-color:#52d1e4;margin-left:1%">
        <img src="../../assets/home_images/kpiicon1.png">
        <span>今日已上传文档</span>
        <!-- <span class="num">10个</span> -->
        <span class="num">{{ upFiles }}个</span>
      </div>
      <div class="zbbg" style="background-color:#a9a3e1;margin-right:0%">
        <img src="../../assets/home_images/kpiicon2.png">
        <span>今日已查看文档</span>
        <!-- <span class="num">100个</span> -->
        <span class="num">{{ viewFiles }}个</span>
      </div>
    </div>
    <div class="echart">
      <div id="tu1" class="ebj2">
        雷达
      </div>
      <div id="tu2" class="ebj2" style="margin-left:3%">
        饼图
      </div>
      <div id="tu3" class="ebj2">
        条图
      </div>
      <div id="tu4" class="ebj2" style="margin-left:3%">
        柱图
      </div>
      <div id="tu5" class="ebj1">
        线图
      </div>
    </div>
  </div>
</template>

<script>

import { searchTopNumber } from '@/api/search'
export default {
  data() {
    return {
      isResize: false,
      wdzl: '0',
      sizeAll: '0',
      upFiles: '0',
      viewFiles: '0',
      topName: [],
      topNum: [],
      topNum1: [],
      topNum2: [],
      topName3: [],
      topNum3: [],
      topNum41: [],
      topNum42: [],
      topNum43: [],
      topNum44: [],
      topMaxNum1: []
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    async searchTopNumber() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 搜索获取数据
      await searchTopNumber().then(response => {
        this.wdzl = response.data.wdzl
        this.sizeAll = response.data.sizeAll
        this.upFiles = response.data.upFiles
        this.viewFiles = response.data.viewFiles
        if (response.data.topName !== null && response.data.topName !== '' && response.data.topName !== undefined) {
          this.topName = response.data.topName.split(',')
        }
        if (response.data.topNum !== null && response.data.topNum !== '' && response.data.topNum !== undefined) {
          this.topNum = response.data.topNum.split(',')
        }
        if (response.data.topNum1 !== null && response.data.topNum1 !== '' && response.data.topNum1 !== undefined) {
          this.topNum1 = response.data.topNum1.split(',')
        }
        if (response.data.topMaxNum1 !== null && response.data.topMaxNum1 !== '' && response.data.topMaxNum1 !== undefined) {
          this.topMaxNum1 = response.data.topMaxNum1
        }
        var zjb4 = response.data.topName2.split(',')
        var zjb5 = response.data.topNum2.split(',')
        for (var h = 0; h < zjb4.length; h++) {
          this.topNum2[h] = {
            name: zjb4[h],
            value: zjb5[h]
          }
        }
        if (response.data.topName3 !== null && response.data.topName3 !== '' && response.data.topName3 !== undefined) {
          this.topName3 = response.data.topName3.split(',')
        }
        if (response.data.topNum3 !== null && response.data.topNum3 !== '' && response.data.topNum3 !== undefined) {
          this.topNum3 = response.data.topNum3.split(',')
        }
        if (response.data.topNum41 !== null && response.data.topNum41 !== '' && response.data.topNum41 !== undefined) {
          this.topNum41 = response.data.topNum41.split(',')
        }
        if (response.data.topNum42 !== null && response.data.topNum42 !== '' && response.data.topNum42 !== undefined) {
          this.topNum42 = response.data.topNum42.split(',')
        }
        if (response.data.topNum43 !== null && response.data.topNum43 !== '' && response.data.topNum43 !== undefined) {
          this.topNum43 = response.data.topNum43.split(',')
        }
        if (response.data.topNum44 !== null && response.data.topNum44 !== '' && response.data.topNum44 !== undefined) {
          this.topNum44 = response.data.topNum44.split(',')
        }

        loading.close()
      }).catch(response => {
        loading.close()
      })
    },
    async drawLine() {
      var _this = this
      await _this.searchTopNumber()
      const tu1 = this.$echarts.init(document.getElementById('tu1'))
      const tu2 = this.$echarts.init(document.getElementById('tu2'))
      const tu3 = this.$echarts.init(document.getElementById('tu3'))
      const tu4 = this.$echarts.init(document.getElementById('tu4'))
      const tu5 = this.$echarts.init(document.getElementById('tu5'))
      window.onresize = function() {
        if (!this.isResize) {
          this.isResize = true
          setTimeout(() => {
            tu1.resize()
            tu2.resize()
            tu3.resize()
            tu4.resize()
            tu5.resize()
            this.isResize = false
          })
        }
      }
      // 雷达图
      const source = {
        data: this.topNum1,
        // data: [80, 45, 86, 50, 70],
        indicator: [
          { name: ' 文档 ', max: this.topMaxNum1 },
          { name: '图片', max: this.topMaxNum1 },
          { name: '视频', max: this.topMaxNum1 },
          { name: '音频', max: this.topMaxNum1 },
          { name: '其他', max: this.topMaxNum1 }
        ]
      }
      const buildSeries = function(data) {
        // console.log('data', data)
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          // console.log('arr', arr)
          arr.splice(index, 1, item)
          return arr
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            symbol: index === 0 ? 'circle' : 'none',
            symbolSize: 6,

            itemStyle: {
              color: 'rgba(81,209,227, 1)'
            },
            lineStyle: {
              color: index === 0 ? 'rgba(81,209,227, 1)' : 'transparent'
            },
            areaStyle: {
              color: index === 0 ? 'rgba(81,209,227, 0.4)' : 'transparent',
              opacity: 0.5
            },
            tooltip: {
              show: index !== 0,
              formatter: function() {
                return source.indicator[index - 1].name + '：' + source.data[index - 1]
              }
            },

            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }
      tu1.setOption({
        title: {
          text: ' {a|} 各类型文档数量',
          left: 20,
          top: 5,
          textStyle: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 500,
            color: '#2351a1',
            rich: {
              a: {
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require('../../assets/home_images/contenticon4.png')
                }
              }
            }
          }
        },
        tooltip: {
          position: function(p) { // 其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10]
          },
          extraCssText: 'width:100px;height:50px;'
        },
        radar: {
          name: {
            show: true,
            textStyle: {
              color: '#000',
              borderRadius: 3,
              width: 50
            }

          },
          center: ['50%', '50%'],
          radius: 100,
          startAngle: 90,
          splitNumber: 6,
          indicator: source.indicator
        },
        series: buildSeries(source.data)
      })
      tu2.setOption({
        title: {
          text: ' {a|} 各类型文档空间占比',
          left: 20,
          top: 5,
          textStyle: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 500,
            color: '#2351a1',
            rich: {
              a: {
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require('../../assets/home_images/contenticon1.png')
                }
              }
            }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '各类型文档空间占比:',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'], // 饼图的位置
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 7,
              borderColor: '#fff',
              borderWidth: 2
            },
            // emphasis高亮状态的扇区和标签样式。
            emphasis: {
              label: {
                show: true,
                // fontSize: '40',
                fontWeight: 'bold'
              }
            },
            label: { // 饼图图形上的文本颜色设置
              normal: {
                show: true,
                position: 'outside', // 标签的位置
                width: 200,
                overflow: 'truncate',
                textStyle: {
                  fontWeight: 200,
                  fontSize: 10// 文字的字体大小
                },
                // {a}：系列名。 // {b}：数据名。  // {c}：数据值。  // {d}：百分比。
                formatter: '{b}:{c}%' // 设置百分比

              }
            },
            // labelLine标签的视觉引导线配置。在 label 位置 设置为'outside'的时候会显示视觉引导线。
            labelLine: {
              show: true,
              lineStyle: {
                length: 3
                // length1: 2

              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} %',
              position: function(p) { // 其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10]
              },
              extraCssText: 'width:65%;height:60px;'
            },
            calculable: false,
            data: this.topNum2
            // data: [
            //   { value: 1.2, name: '文档', itemStyle: { color: '#9f99d9' }}, // 饼图图形颜色
            //   { value: 3, name: '图片', itemStyle: { color: '#44c9db' }},
            //   { value: 5, name: '视频', itemStyle: { color: '#e9b129' }},
            //   { value: 2.5, name: '音频', itemStyle: { color: '#4c5d7a' }},
            //   { value: 3, name: '其他', itemStyle: { color: '#2351a1' }}
            // ]
          }
        ]
      })
      tu3.setOption({
        title: {
          text: ' {a|} 用户文档上传数量top10',
          left: 20,
          top: 5,
          textStyle: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 500,
            color: '#2351a1',
            rich: {
              a: {
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require('../../assets/home_images/contenticon3.png')
                }
              }
            }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          x: 80, // x:坐标轴左边与边框的距离
          y: 40, // y:坐标轴顶端与边框的距离
          x2: 45, // x2:坐标轴右边与边框的距离
          y2: 30 // y2:坐标轴底端与边框的距离
        },
        xAxis: {
          type: 'value',
          axisTick: { // y轴刻度线
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: this.topName,
          // data: ['欧弘光', '范志国', '芮恺乐', '訾和歌', '苏元德', '蒋听枫', '居子璇', '怀莹琇', '浦梦寒', '禄向珊'],
          axisLine: {
            show: false
          },
          axisTick: { // y轴刻度线
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: this.topNum,
            // data: [272, 297, 319, 331, 336, 338, 339, 367, 431, 680],
            tooltip: {
              position: function(p) { // 其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10]
              },
              extraCssText: 'width:40%;height:60px;',
              formatter: '{b0}: {c0}篇',
              padding: [
                5, // 上
                10, // 右
                5, // 下
                10 // 左
              ]
            },
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 15, 15, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#F5F4FA' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#a9a3e1' // 100% 处的颜色
                    }
                  ]

                }
              }
            }
          }
        ]
      })
      tu4.setOption({
        title: {
          text: ' {a|} 角色文档上传数量统计',
          left: 20,
          top: 5,
          textStyle: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 500,
            color: '#2351a1',
            rich: {
              a: {
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require('../../assets/home_images/contenticon3.png')
                }
              }
            }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          x: 80, // x:坐标轴左边与边框的距离
          y: 50, // y:坐标轴顶端与边框的距离
          x2: 45, // x2:坐标轴右边与边框的距离
          y2: 30 // y2:坐标轴底端与边框的距离
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: this.topName3,
          // data: ['产业研究部', '产业发展部', '规划咨询部', '市场部', '项目管理办公室', '建设运营部'],
          axisLine: {
            show: false
          },
          axisTick: { // y轴刻度线
            show: false
          },
          nameRotate: '30'
        },
        series: [
          {
            type: 'bar',
            data: this.topNum3,
            // data: [272, 497, 219, 331, 636, 138],
            tooltip: {
              position: function(p) { // 其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10]
              },
              extraCssText: 'width:40%;height:60px;',
              formatter: '{b0}: {c0}篇',
              padding: [
                5, // 上
                10, // 右
                5, // 下
                10 // 左
              ]
            },
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 0, 0],
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#F0FBFD' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#51d1e3' // 100% 处的颜色
                    }
                  ]

                }
              }
            }
          }
        ]
      })
      tu5.setOption({
        title: {
          text: ' {a|} 本周文档活跃度统计',
          left: 20,
          top: 5,
          textStyle: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            fontWeight: 500,
            color: '#2351a1',
            rich: {
              a: {
                height: 20,
                width: 20,
                backgroundColor: {
                  image: require('../../assets/home_images/contenticon2.png')
                }
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '20',
          right: '30',
          data: ['上传量', '下载量', '查看量', '直接访问', '搜索引擎']
        },
        grid: {
          x: 80, // x:坐标轴左边与边框的距离
          y: 50, // y:坐标轴顶端与边框的距离
          x2: 45, // x2:坐标轴右边与边框的距离
          y2: 30 // y2:坐标轴底端与边框的距离
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          data: this.topNum41
          // data: ['6月7日', '6月8日', '6月9日', '6月10日', '6月11日', '6月12日', '6月13日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '上传量',
            type: 'line',
            smooth: true,
            color: '#52d1e4',
            data: this.topNum42
            // data: [120, 132, 101, 134, 90, 130, 110]
          },
          {
            name: '下载量',
            type: 'line',
            smooth: true,
            color: '#e58a05',
            data: this.topNum43
            // data: [220, 182, 191, 234, 290, 130, 210]
          },
          {
            name: '查看量',
            type: 'line',
            smooth: true,
            color: '#a9a3e1',
            data: this.topNum44
            // data: [150, 232, 201, 154, 190, 230, 310]
          }
        ]
      })
    }
  }
}
</script>
<style >
.body {
  width: 98%;
  padding: 20px 1% 0px;
  background: url(../../assets/home_images/bg.jpg);
}
.header {
  width: 100%;
  height: 50px;
  background: url(../../assets/home_images/title_tag.png) no-repeat;
}
.title {
  font: bold 30px '微软雅黑';
  color:  #4D5E7B;
  padding-left: 50px;
  line-height: 45px;
}
.zb {
  width: 100%;
  height: 100px;
  margin:20px 0px;
}
.zbbg {
  float: left;
  width: 23%;
  height: 85px;
  border-radius: 20px;
  box-shadow: 2px 2px 3px #aaaaaa;
  margin-right: 2%;
  font: 20px '微软雅黑';
  color: #fff;
}
.zbbg img {
  margin:19px 10px 19px 30px;
  float:left
}
.zbbg span {
  line-height: 80px;
}
.num {
  float: right;
  margin-right: 50px;
}
.echart{
  width: 100%;
  padding-bottom: 30px;
}
.ebj2 {
  float: left;
  width: 48%;
  height: 300px;
  background-color: #fff;
  margin-bottom: 30px;
  border-radius: 20px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.ebj1 {
  clear: both;
  width: 99%;
  height: 300px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
</style>
